<template>
  <view v-if="shenheStatus == 0" class="form">
    <view class="formItem">
      <view class="let">
        <view class="name">接收通知总开关 <text>[可收到推送]</text></view>
        <view class="des">当前为打开状态，可自定义接受消息类型</view>
      </view>
      <view class="rig">
        <i class="iconfont icon-arrow-right"></i>
      </view>
    </view>

    <view class="ts">接受通知消息类型</view>

    <view class="formItem">
      <view class="let">
        <view class="name">私聊/交易消息 <text>[可收到推送]</text></view>
        <view class="des">私聊、订单进度、物流状态等消息</view>
      </view>
      <view class="rig">
        <i class="iconfont icon-arrow-right"></i>
      </view>
    </view>

    <view class="formItem">
      <view class="let">
        <view class="name">服务号消息</view>
        <view class="des">可自定义接受服务号的消息推送</view>
      </view>
      <view class="rig">
        <i class="iconfont icon-arrow-right"></i>
      </view>
    </view>

    <view class="formItem">
      <view class="let">
        <view class="name">通知消息 <text>[可收到推送]</text></view>
        <view class="des">系统通知、客服维权等消息</view>
      </view>
      <view class="rig">
        <switch
          @change="(e) => switchChange(e, 'checked1')"
          :checked="form.checked1"
          color="#FFE60F"
        />
      </view>
    </view>

    <view class="formItem">
      <view class="let">
        <view class="name">互动消息 <text>[可收到推送]</text></view>
        <view class="des">留言、回复、赞等消息</view>
      </view>
      <view class="rig">
        <switch
          @change="(e) => switchChange(e, 'checked2')"
          :checked="form.checked2"
          color="#FFE60F"
        />
      </view>
    </view>

    <view class="formItem">
      <view class="let">
        <view class="name">关注消息 <text>[可收到推送]</text></view>
        <view class="des">关注人的相关动态、宝贝上新等消息</view>
      </view>
      <view class="rig">
        <switch
          @change="(e) => switchChange(e, 'checked3')"
          :checked="form.checked3"
          color="#FFE60F"
        />
      </view>
    </view>
  </view>
  <Shenhe v-else-if="shenheStatus == 1"></Shenhe>
</template>

<script>
import Shenhe from "@/components/shenhe/shenhe";
export default {
  components: { Shenhe },

  data() {
    return {
      form: {
        checked1: false,
        checked2: false,
        checked3: false,
      },
    };
  },

  methods: {
    switchChange(e, el) {
      let { value } = e.detail;
      this.form[el] = value;

      uni.setStorageSync("pushSettingsForm", this.form);
    },
  },

  onLoad() {
    let form = uni.getStorageSync("pushSettingsForm");
    if (form) {
      this.form = form;
    }
  },
};
</script>

<style lang="scss" scoped>
.formItem {
  display: flex;
  align-items: center;
  padding: 30rpx;

  .let {
    flex: 1;
    overflow: hidden;

    .name {
      font-size: 30rpx;
      font-weight: bold;

      text {
        display: inline-block;
        margin-left: 15rpx;
        font-size: 28rpx;
        font-weight: normal;
      }
    }

    .des {
      margin-top: 18rpx;
      font-size: 24rpx;
    }
  }

  .rig {
    margin-left: 10rpx;

    .iconfont {
      color: #999;
      font-size: 30rpx;
    }
  }
}

.ts {
  padding: 30rpx;
  background: #f7f7f7;
  color: #a7a7a7;
}

.des,
text {
  color: #999;
}
</style>
